<template>
   <div id="message-content-box" class="message-content-box">
      <div class="title">
         <div class="left">{{ title }}</div>
         <div class="right-box">
            <slot name="header"></slot>
         </div>
      </div>
      <div class="content GradientAnimation">
         <slot name="content"></slot>
      </div>
   </div>
</template>
<script lang="ts" setup >
// 消息页-插槽盒子
const props = defineProps({
   title: {
      type: String,
      default: "请传入title"
   }
})

</script>
<style lang="scss" scoped>
#message-content-box {
   width: 100%;
   min-height: 730px;
   background-color: #FFF;
   border-radius: var(--aoir-border-radius);
   box-shadow: var(--aoir-box-shadow);
   padding: 20px;

   .title {
      font-size: 20px;
      width: 100%;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(238, 238, 238, 0.5058823529);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
         flex: 1;
      }

      .right-box {
         font-size: 14px;
      }
   }

   .content {
      width: 100%;
   }
}
</style>